<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>积分表管理</title>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>

    <style>
        .input-count {
            width: 150px;
            /* 根据需要设置合适的宽度 */
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 style="text-align: center;">积分表管理</h2>
        <el-select v-model="selectedPointsId" placeholder="请选择积分表" style="width: 300px;">
            <el-option v-for="point in pointsList" :key="point.pointsId" :label="point.pointsId+'号:'+point.title+'积分表'"
                :value="point.pointsId" :style="{
                    color: point.isUsed ? 'blue' : ''                
                }"></el-option>
        </el-select>
        <br>
        <div
            style="background-color: rgb(108, 173, 98); padding: 10px; width: 300px;margin-bottom: 20px; margin-top: 10px;">
            <p>当前发布的版本:</p>
            <h4>{{isInUserPoint.pointsId}}号{{isInUserPoint.title}}积分表</h4>
        </div>

        <div
            style="background-color: rgb(54, 120, 146); padding: 10px; width: 300px; height: 70px;margin-bottom: 20px;">
            <p v-if="selectedPointsId !== ''">当前选择的积分表为:</p>
            <h4 v-if="selectedPointsId">
                {{ pointsList.find(point => point.pointsId === selectedPointsId)?.title }}
                <span v-if="pointsList.find(point => point.pointsId === selectedPointsId)?.isUsed"
                    style="color: red;">(使用过)</span>
            </h4>
        </div>


        <div>
            <el-button type="primary" @click="createPoints">新建积分表</el-button>
            <!-- 新建积分表对话框 -->
            <el-dialog title="新建积分表" :visible.sync="dialogVisible">
                <el-form :model="form">
                    <el-form-item label="积分表标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="savePoints">创建</el-button>
                </span>
            </el-dialog>
            <el-button type="primary" @click="copy">复制</el-button>
            <el-button type="primary" @click="post">发布</el-button>
            <br><br>
            <form v-if="showPointsInfo" @submit.prevent="changePointsInfo">
                <h3>积分表基本信息</h3>
                <el-form-item label="标题">
                    <el-input v-model="pointsInfo.title"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="pointsInfo.description"></el-input>
                </el-form-item>
                <h3>积分规则</h3>
                <div>
                    <template>
                        <div>
                            <el-input v-model="count" type="number" placeholder="请输入数量" class="input-count"></el-input>
                            <el-button type="primary" @click="addPointsRule"
                                :disabled="pointsList.find(point => point.pointsId === selectedPointsId).isUsed === 1">添加规则</el-button>
                        </div>
                    </template>
                    <el-table :data="pointsRules" :row-key="row => row.pointsRulesId" style="width: 100%" ref="table">
                        <el-table-column label="规则编号" prop="pointsRulesId" editable>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.isEditing">{{ scope.row.pointsRulesId }}</span>
                                <el-input v-else v-model="scope.row.pointsRulesId"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="规则标题" prop="ruleTitle" editable>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.isEditing">{{ scope.row.ruleTitle }}</span>
                                <el-input v-else v-model="scope.row.ruleTitle"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="积分值" prop="pointsValue" editable>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.isEditing">{{ scope.row.pointsValue }}</span>
                                <el-input v-else v-model="scope.row.pointsValue"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="详情" prop="details" editable>
                            <template slot-scope="scope">
                                <span v-if="!scope.row.isEditing">{{ scope.row.details }}</span>
                                <el-input v-else v-model="scope.row.details"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="!scope.row.isEditing" type="primary" @click="editPointsRule(scope.row)"
                                    :disabled="pointsList.find(point => point.pointsId === selectedPointsId).isUsed === 1">修改
                                </el-button>
                                <el-button v-else type="success" @click="savePointsRule(scope.row)"> 保存 </el-button>
                                <el-button type="danger" @click="deletePointsRule(scope.row, scope.$index)"
                                    :disabled="pointsList.find(point => point.pointsId === selectedPointsId).isUsed === 1">
                                    删除规则
                                </el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-button type="primary" native-type="submit">返回</el-button>
                <el-button type="danger" @click="deletePoints"
                    :disabled="pointsList.find(point => point.pointsId === selectedPointsId).isUsed === 1">删除积分表</el-button>
                <el-button type="primary" icon="el-icon-document" @click="downloadScoreSheet">下载募捐积分表</el-button>
                <el-button type="primary" icon="el-icon-upload2" @click="upload"
                    :disabled="pointsList.find(point => point.pointsId === selectedPointsId).isUsed === 1">
                    上传募捐资料
                </el-button>
                <input type="file" ref="file" v-show="false" @change="handleFileUpload" />
        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    isInUserPoint: {},
                    isUsed: '',
                    count: 0,
                    pointsList: [],
                    pointsInfo: null,
                    showPointsInfo: false,
                    pointsRules: null,
                    elForm: null, // 添加elForm属性 
                    editingRow: null,
                    pointsRules: [],
                    dialogVisible: false,
                    pointsRuleId: '',
                    pointsId: '',
                    selectedPointsId: null,
                    form: {
                        title: '',
                        description: '',
                    }
                },
                watch: {
                    selectedPointsId(newValue, oldValue) {
                        if (this.selectedPointsId == null) {
                            return;
                        }
                        axios.get('http://localhost:8888/api/points/getPointsInfo', {
                            params: {
                                pointsId: this.selectedPointsId
                            }
                        })
                            .then(function (response) {
                                app.pointsInfo = response.data.data;
                                app.showPointsInfo = true;
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                        axios.get('http://localhost:8888/api/donation/getPoints', {
                            params: {
                                pointsId: this.selectedPointsId
                            }
                        })
                            .then(function (response) {
                                app.pointsRules = response.data.data;
                                app.showPointsInfo = true;
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                },
                methods: {
                    getPointsInfo() {
                    if (this.selectedPointsId == null) {
                        return;
                    }
                    axios.get('http://localhost:8888/api/points/getPointsInfo', {
                        params: {
                            pointsId: this.selectedPointsId
                        }
                    })
                        .then(function (response) {
                            app.pointsInfo = response.data.data;
                            app.showPointsInfo = true;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    axios.get('http://localhost:8888/api/donation/getPoints', {
                        params: {
                            pointsId: this.selectedPointsId
                        }
                    })
                        .then(function (response) {
                            app.pointsRules = response.data.data;
                            app.showPointsInfo = true;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },  
                    //修改按钮
                    editPointsRule(row) {
                    this.$set(row, "isEditing", true); // 使用Vue.set或this.$set添加响应式属性isEditing
                    row.isEditing = true;
                    this.editingRow = row;
                },
                //保存修改数据按钮
                savePointsRule(row) {
                    row.isEditing = false;
                    axios.post('http://localhost:8888/api/points/uploadPointsRule', row)
                        .then(response => {
                            alert(response.data.message);
                            this.editingRow = null;
                            this.$set(row, "isEditing", false);
                        })
                        .catch(error => {

                            console.error('保存失败：', error);
                        });
                },
                //删除积分规则
                deletePointsRule(row, index) {
                    console.log(row);
                    this.formData = { pointsRulesId: row.pointsRulesId }
                    axios.post('http://localhost:8888/api/points/deletePointsRule', this.formData)
                        .then(response => {
                            if (response.data.code === 0) {
                                this.pointsRules.splice(index, 1);
                                this.$message.success(response.data.message);
                            } else {
                                this.$message.error('删除规则失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            this.$message.error('删除规则失败：服务器错误');
                        });
                },
                getPointsList() {
                    axios.get('http://localhost:8888/api/points/list')
                        .then(function (response) {
                            app.pointsList = response.data.data;
                            // 遍历pointsList数组，找到isInUse为1的项并赋值给isInUserPoint
                            app.pointsList.forEach(function (point) {
                                if (point.isInUse === 1) {
                                    app.isInUserPoint = point;
                                    // 如果只需要找到第一个符合条件的项，可以添加return语句跳出循环
                                    // return;
                                }
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                //删除结构表
                deletePoints: function () {
                    // 将 this.selectedPoints.pointsId 转换为整数
                    var pointsId = parseInt(this.selectedPointsId);
                    if (isNaN(pointsId)) {
                        console.log('pointsId is not a valid number');
                        return;
                    }
                    this.formData = {
                        pointsId: parseInt(this.selectedPointsId)
                    }
                    axios.post('http://localhost:8888/api/points/deletePoints',
                        this.formData
                    )
                        .then(function (response) {
                            if (response.data.code === 0) {
                                location.reload()
                                alert("删除成功")
                                app.getPointsList();
                            }
                            else {
                                alert(response.data.message)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                addPointsRule() {
                    // 将 this.selectedPointsId 转换为整数
                    var pointsId = parseInt(this.selectedPointsId);
                    if (isNaN(pointsId)) {
                        console.log('pointsId is not a valid number');
                        return;
                    }
                    this.formData = {
                        pointsId: pointsId,
                        count: this.count
                    }
                    axios.post('http://localhost:8888/api/points/addPointsRule', this.formData)
                        .then((response) => {
                            console.log(response.data);
                            this.getPointsInfo();
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                },
                //新建积分表
                createPoints() {
                    this.dialogVisible = true;
                },
                closeDialog() {
                    this.dialogVisible = false;
                },
                savePoints() {

                    this.closeDialog();
                },
                //新建积分表
                savePoints() {
                    axios.post("http://localhost:8888/api/points/create", this.form)
                        .then(response => {
                            if (response.data.code === 0) {
                                this.$message.success(response.data.message);
                                this.closeDialog();
                                location.reload();
                            } else {
                                this.$message.error('新建积分表失败');
                            }
                        })
                        .catch(error => {
                            this.$message.error('新建积分表失败');
                        });
                },
                //复制积分表
                copy() {
                    var pointsId = parseInt(this.selectedPointsId);
                    if (!this.selectedPointsId) {
                        // 如果没有选择积分表，给出提示
                        alert('请先选择积分表');
                        return;
                    }
                    this.formData = {
                        pointsId: pointsId
                    }
                    axios.post('http://localhost:8888/api/points/copy',
                        this.formData
                    )
                        .then(response => {
                            // 根据返回的数据进行处理
                            if (response.data.code === 0) {
                                alert(response.data.message);
                                location.reload();

                            } else {
                                alert('拷贝失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            alert('拷贝失败：' + error.message);
                        });
                },
                changePointsInfo: function () {
                    axios.post('http://localhost:8888/api/points/changePoints', app.pointsInfo)
                        .then(function (response) {
                            app.getPointsList();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                //下载募捐积分表
                downloadScoreSheet() {
                    axios.get('http://localhost:8888/api/points/download', {
                        responseType: 'blob',
                        params: {
                            pointsId: this.selectedPointsId // 替换为您需要下载的文件对应的pointsId
                        }
                    })
                        .then(response => {
                            const url = window.URL.createObjectURL(new Blob([response.data]));
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', 'points.doc');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            window.URL.revokeObjectURL(url);
                        })
                        .catch(error => {
                            console.error('下载失败', error);
                        });
                },
                //上传
                upload() {
                    this.$refs.file.click()
                },
                handleFileUpload() {
                    let file = this.$refs.file.files[0];
                    let pointsId = this.selectedPointsId
                    let formData = new FormData();
                    formData.append('pointsId', pointsId);
                    formData.append('file', file);
                    axios.post("http://localhost:8888/api/points/uploadFile", formData, {
                        headers: {
                            "Content-Type": "multipart/form-data",
                        },
                    })
                        .then((response) => {
                            const data = response.data;
                            if (data.code === 0) {
                                this.$message.success(response.data.message)
                            } else {
                                this.$message.error(response.data.message);
                            }
                        })
                        .catch((error) => {
                            this.$message.error('上传失败');
                        });
                },
                //发布
                post() {
                    var pointsId = parseInt(this.selectedPointsId);
                    this.formData = {
                        pointsId: pointsId
                    }
                    axios.post('http://localhost:8888/api/points/replacePoints', this.formData)
                        .then(response => {
                            const { code, message, data } = response.data;
                            if (code === 0) {
                                this.$message.success(response.data.message);
                                location.reload()
                            } else {
                                this.$message.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            this.$message.error('上传失败');
                        });
                }
            },
                mounted: function () {
                    this.getPointsList();
                }
            });
        </script>
</body>

</html>